Vue Rotuer介紹

Vue Router 是 Vue 官方提供的路由管理器，讓前端在操作頁面 route 時更加的方便。在Instance設定路由，指定在HTML上某個區塊顯示內容，與Vue的slot很像，都是預留空間來顯示元素

用router-link設定路由，並用router-view顯示Component內容，router-link必須包含在標籤裡。

會依照設定好的路由，對應顯示內容，也可帶參數params到Component裡，透過參數做不同的回應。

連結(href)

VueRouter跟<a href>區別是什麼?

<div id="app">
  <p>
    <a href="/test">Test Href Will 404!</a>
  </p>
  <p>
    <router-link to="/test">Test Router<router-link>
  <p>
  <router-view></router-view>
</div>

import VueRouter from 'vue-router';

const test = { template: '<div>Show Test</div>' }
const router = new VueRouter({
    routes: [
      {
        path: '/test',
        component: test,
      },
    ], 
})

new Vue({
  el: '#app',
  router
})

<a href>標籤是直接在網頁上的網址做導頁，而會顯示404 error。而在VueRouter找'/test'，因router-link設定/test路由，對應到Component變數test，點擊Test Router文字後，會去找test變數的模板內容，router-view會顯示Show Test。

麵包屑(Breadcrumbs)

如何用vue-rotuer做麵包屑導覽

<div id="app">
	<p>
		<router-link to="/bread1">Test Bread1</router-link>
	</p>
  <p>
		<router-link to="/bread2">Test Bread2</router-link>
	</p>
	<br/><br/>
	<router-view></router-view>
</div>

<style>
	.router-link-active {
	  background: black;
	  color: white;
	}
</style>

import VueRouter from 'vue-router';

const bread1 = { template: '<div>Show bread1</div>' }
const bread2 = { template: '<div>Show bread2</div>' }
const router = new VueRouter({
    routes: [
      {
        path: '/bread1',
        component: bread1,
      },
			{
        path: '/bread2',
        component: bread2,
      },
    ], 
})

new Vue({
  el: '#app',
  router
})

在點選文字(Test Bread1, Test Bread2)時，透過改變class="router-link-active"，將文字呈現黑底白字，router-link-active是vue-router透過路由找Component時，會附在元素上的class。

參數(params)

可以將參數透過Vue Router帶入Component

<div id="app">
  vue-router想要外帶<input type="text" v-model="key">
  <p>
    <router-link :to="params">送出</router-link>
  </p>
  <br/><br/>
  <router-view></router-view>
</div>

const params = { template: '<div>vue-router帶走了 {{ $route.params.key }}</div>' }
const router = new VueRouter({
    routes: [
      {
        path: '/params/:key',
        component: params,
      },
    ], 
})

new Vue({
  el: '#app',
  data: {
    key:''
  },
  computed:{
    params(){
      return '/params/' + this.key
    }
  },
  router
})

在文字框輸入test，並將資料用參數的方式傳給Component，key雙向綁定文字框的value，就會顯示vue-router帶走了test

Vue-Rotuer基本設定

• path：路徑
• name：路由的名稱
• component：要指向的component名稱
• redirect：當component重新導頁時，指向到別的路由
• props：要將設定資料傳到component時，需要寫true才可以傳遞
• alias：設定路由的別名
• children：當Rotuer中有父、子component時，children是指子component的Rotuer設定
• meta：可當參數傳給Rotuer設定全部的component共用
• beforeEnter：在進入到路由之前，可先執行function，但是要帶上to、from、next，一定要使用next()，才可以在beforeEnter做下一步動作
  1. to：指的要跑的路由位置
  2. from：路由的物件
  3. next：指定下一步要執行的function
• caseSensitive：設定路由是否要限定英文大小寫，預設值為false

可以在path可以寫正規化，來定義路由，當輸入任一個參數時，可藉由正規化規則在component來決定觸發哪個事件。有定義好就不會因為path錯誤一直看到404 error。

Resource
前端路由基礎與動態參數
Getting Started with Vue Router
Router 基本入門